import 'package:cached_network_image/cached_network_image.dart';
import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/radian.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class MineOpinionFeedbackController extends GetxController {
  List<String> tabs = ['问题BUG', '需求建议', '使用体验', '其他'];
  RxInt tabIndex = 0.obs;

  RxList<String> imgUrls = RxList([
    'https://img.alicdn.com/imgextra/i2/49312523/O1CN01q6udpl1UVa7cKPNoZ_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp',
    'https://img.alicdn.com/imgextra/i1/27156523/O1CN01PSwMZZ1y3aU2npYIG_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp',
    'https://img.alicdn.com/imgextra/i1/120987001/O1CN01cqWyCi21aVca3cH8N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp',
    'https://img.alicdn.com/imgextra/i2/96904676/O1CN017OKkpx1kPex4GAXhu_!!2-saturn_solar.png_360x360xzq75.jpg_.webp'
  ]);
}

class MineOpinionFeedbackPage extends GetView<MineOpinionFeedbackController> {
  const MineOpinionFeedbackPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
        title: Text(
          '意见反馈',
          style: StylesUtils.customTextStyle(
              fontSize: StylesUtils.fontSize18, fontWeight: FontWeight.w700),
        ),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(horizontal: 15),
        child: Column(
          children: [
            Container(
              height: 50,
              alignment: Alignment.centerLeft,
              child: Text(
                '请选择问题类型',
                style:
                    StylesUtils.customTextStyle(color: ColorsUtils.color3333),
              ),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Wrap(
                spacing: 20,
                crossAxisAlignment: WrapCrossAlignment.center,
                alignment: WrapAlignment.start,
                children: controller.tabs
                    .asMap()
                    .map((key, value) => MapEntry(
                        key,
                        Obx(() => InkWell(
                              onTap: () {
                                controller.tabIndex.value = key;
                              },
                              child: Chip(
                                backgroundColor:
                                    ColorsUtils.parseColorFromHexString(
                                        controller.tabIndex.value == key
                                            ? ColorsUtils.colorF048
                                            : ColorsUtils.colorCccc),
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(5)),
                                labelPadding:
                                    const EdgeInsets.symmetric(horizontal: 8),
                                padding: EdgeInsets.zero,
                                side: BorderSide.none,
                                label: Text(
                                  value,
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize12),
                                ),
                              ),
                            ))))
                    .values
                    .toList(),
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: TextField(
                cursorHeight: 15,
                cursorWidth: 3,
                cursorColor:
                    ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
                cursorRadius: const Radius.circular(2),
                cursorOpacityAnimates: false,
                maxLines: 15,
                maxLength: 200,
                minLines: 10,
                style:
                    StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                decoration: InputDecoration(
                    hintText: '请输入您遇到的问题或，不少以10个字',
                    hintStyle: StylesUtils.customTextStyle(
                        color: ColorsUtils.color9999,
                        fontSize: StylesUtils.fontSize13),
                    enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.zero,
                        borderSide: BorderSide(
                            color: ColorsUtils.parseColorFromHexString(
                                ColorsUtils.colorCccc))),
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.zero,
                        borderSide: BorderSide(
                            color: ColorsUtils.parseColorFromHexString(
                                ColorsUtils.colorCccc))),
                    focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.zero,
                        borderSide: BorderSide(
                            color: ColorsUtils.parseColorFromHexString(
                                ColorsUtils.colorCccc))),
                    contentPadding: const EdgeInsets.symmetric(
                        vertical: 20, horizontal: 15)),
                buildCounter: (context,
                    {required int currentLength,
                    int? maxLength,
                    required bool isFocused}) {
                  return Text(
                    '$currentLength/$maxLength',
                    style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color9999,
                    ),
                  );
                },
                onChanged: (String value) {},
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(vertical: 20),
              alignment: Alignment.centerLeft,
              child: Text(
                '上传图片（最多6张）',
                style:
                    StylesUtils.customTextStyle(color: ColorsUtils.color3333),
              ),
            ),
            Obx(() => StaggeredGrid.count(
                  crossAxisCount: 3,
                  crossAxisSpacing: 15,
                  mainAxisSpacing: 20,
                  children: [
                    ...controller.imgUrls.map((url) => ClipRRect(
                          child: Stack(
                            children: [
                              CachedNetworkImage(
                                imageUrl: url,
                                width: 100,
                                height: 100,
                                fit: BoxFit.fill,
                                alignment: Alignment.topLeft,
                              ),
                              Positioned(
                                  top: -5,
                                  right: -5,
                                  child: SizedBox(
                                    width: 24,
                                    height: 24,
                                    child: CustomPaint(
                                      painter: _MyClosed(),
                                      child: InkWell(
                                          onTap: () {},
                                          child: Center(
                                            child: Icon(
                                              Icons.close,
                                              size: 10,
                                              color: ColorsUtils
                                                  .parseColorFromHexString(
                                                      ColorsUtils.colorF048),
                                            ),
                                          )),
                                    ),
                                  ))
                            ],
                          ),
                        )),
                    DottedBorder(
                      options: RectDottedBorderOptions(
                        dashPattern: [8, 4],
                        color: ColorsUtils.parseColorFromHexString(
                            ColorsUtils.colorCccc),
                      ),
                      child: IconButton(
                        constraints: const BoxConstraints.expand(
                            width: 100, height: 100),
                        alignment: Alignment.center,
                        icon:
                            SvgUtils.assetName('u17138', width: 30, height: 30),
                        onPressed: () async {
                          List<XFile> files =
                              await ToolsUtils.loadGalleryImage();
                          Get.log('files = $files');
                        },
                      ),
                    )
                  ],
                )),
            Container(
              padding: const EdgeInsets.symmetric(vertical: 25),
              alignment: Alignment.center,
              child: TextButton(
                  onPressed: () {},
                  style: ButtonStyle(
                      backgroundColor: MaterialStatePropertyAll(
                          ColorsUtils.parseColorFromHexString(
                              ColorsUtils.colorF048)),
                      minimumSize:
                          const MaterialStatePropertyAll(Size(240, 40)),
                      padding: const MaterialStatePropertyAll(EdgeInsets.zero),
                      shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20))),
                      alignment: Alignment.center),
                  child: Text(
                    '提交',
                    style: StylesUtils.customTextStyle(),
                  )),
            )
          ],
        ),
      ),
    );
  }
}

class _MyClosed extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    paint.color = Colors.white;
    paint.style = PaintingStyle.fill;
    // Rect rect = Offset.zero & size;
    Rect rect = Rect.fromCircle(
        center: Offset(size.width / 2, size.width / 2), radius: size.width / 2);
    canvas.drawArc(rect, RadianUtils.angleToRadian(0),
        RadianUtils.angleToRadian(360), false, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}
